<template>
    <div>
        <div class="head">
            <el-form inline :model="selectdata"
                     label-width="150px"
                     size="small"
            >


                <el-form-item>
                    <el-input v-model="selectdata.nickname" @keyup.enter.native="search"
                              placeholder="请输入管理员昵称">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
                    <el-button plain type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                </el-form-item>
            </el-form>

          <!--            <div>-->
          <!--                &lt;!&ndash; 新增 &ndash;&gt;-->
          <!--                <el-button size="small" plain type="primary" icon="el-icon-plus" @click="openDialog('add')">新增<i-->
          <!--                        class="el-icon&#45;&#45;right"></i>-->
          <!--                </el-button>-->
          <!--            </div>-->


        </div>


        <div>
            <!-- 表 -->
            <el-table :data="tableData" border v-loading="loading">
                <el-table-column label="用户ID" align="center">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>


                <el-table-column label="管理员昵称" align="center">
                    <template slot-scope="scope">{{ scope.row.nickname }}</template>
                </el-table-column>


                <el-table-column label="手机号" align="center">
                    <template slot-scope="scope">{{ scope.row.mobile }}</template>
                </el-table-column>

                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
            <span v-if="scope.row.deleted===0" style="color: green">
              正常
            </span>
                        <span v-if="scope.row.deleted===1">
              删除
            </span>
                    </template>
                </el-table-column>


            </el-table>
            <div class="page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
        </div>


    </div>
</template>

<script>
    import moment from 'moment'
    import {user_list} from '@/api/sysuser'

    export default {
        name: "sys_user",
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
                dateRange: [],
                loading: false,
                formInline: {},
                selectdata: {
                    userId: "",
                    nickname: "",

                }
            };
        },
        created() {
            this.getData();
        },
        methods: {
            /**
             * 重置搜索
             */
            clearForm() {
                this.selectdata = {};
                this.getData();
            },

            openDialog(type, val) {
                if (type === 'add') {
                    this.form = {};
                    this.open = true;
                    this.type = "add";
                    this.title = "新增用户"

                } else {
                    this.type = "edit";
                    this.title = "修改用户";
                    let params = {};
                    params.id = val;
                    detail(params).then(res => {
                        if (res.status === 200) {
                            this.open = true;
                            this.form = res.data;
                        }
                    })
                }
            },

            /**
             * 搜索
             */
            search() {
                this.currentPage = 1;
                this.getData()
            },


            /**
             * 获取数据
             */
            getData() {
                let params = {};
                this.loading = true;
                params.userId = this.selectdata.userId;
                params.nickname = this.selectdata.nickname;
                params.pageSize = this.pageSize;
                params.pageNumber = this.currentPage;
                user_list(params).then(res => {
                    if (res.status === 200) {
                        this.loading = false;
                        this.total = Number.parseInt(res.data.total);
                        this.tableData = res.data.list;
                    }

                })
            },
            /**
             * 改变每页大小
             */
            handleSizeChange(e) {
                this.pageSize = e;
                this.getData();
            },
            /**
             * 改变当前页
             */
            handleCurrentChange(e) {
                this.currentPage = e;
                this.getData();
            },
        },
        filters: {
            filterCtime(ctime) {
                // 过滤时间
                if (ctime) {
                    return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return '暂无数据'
                }
            },
            filterShow(show) {
                if (show === 1) {
                    return '显示'
                } else {
                    return '不显示'
                }
            }
        }
    }
</script>

<style scoped>

</style>
